<template>
  <div class="stats-wrapper">
    <div class="stats-header">
      <div class="header-left">
        <div class="btn-backend" @click="gotoBackend">进入后台</div>
        <div class="date-time">{{ currentDateTime }}</div>
      </div>
      <p class="header-text">安全生产双重预防智安平台驾驶舱</p>
      <div class="weather">
        <!-- <div class="alarm">
          <img :src="require('./images/icon-weather.png')" />
          <span>暴雨橙色预警</span>
        </div>-->
        <div class="info">{{ weather }}</div>
      </div>
    </div>

    <div class="stats-content">
      <div class="block-left">
        <div class="border-box left1">
          <div class="header">
            <span>主体企业覆码总数</span>
          </div>
          <div class="container">
            <div v-for="(item, index) in codeArr" :key="index" class="code-item">
              <div class="chart-box">
                <pie-progress
                  :id="`chart1-${index}`"
                  :color="[item.color,'#00000000']"
                  :data="[{name:'数量1',count:item.count},{name:'数量2',count:100-item.count}]"
                ></pie-progress>
              </div>
              <div class="name">{{ item.name }}</div>
              <div :style="{ color: item.color }">{{ item.level }}</div>
            </div>
          </div>
        </div>

        <div class="border-box left2">
          <div class="header">
            <span>重点高风险企业统计</span>
            <div class="tabs-wrapper">
              <div
                v-for="(item, index) in tabs2"
                :key="index"
                class="tab-box"
                :class="{active:tabIndex2===index}"
                @click="changeTab2(index)"
              >{{item.name}}</div>
            </div>
          </div>
          <div class="container">
            <bar-simple id="chart2" :color="['#00FFB5','#0D288F']" :data="majorData"></bar-simple>
          </div>
        </div>

        <div class="border-box left3">
          <div class="header">
            <span>主体安全生产标准化台帐履责率</span>
            <div class="tabs-wrapper">
              <div
                v-for="(item, index) in tabs3"
                :key="index"
                class="tab-box"
                :class="{active:tabIndex3===index}"
              >{{item.name}}</div>
            </div>
          </div>
          <div class="container">
            <pie-double id="chart3" :color="['#05FFAF','#40A9FF']" :data="ledgerData" :total="ledgerTotal"></pie-double>
          </div>
        </div>

        <div class="border-box left4">
          <div class="header">
            <span>主体安全生产双重预防体系履责率</span>
            <div class="tabs-wrapper">
              <div
                v-for="(item, index) in tabs4"
                :key="index"
                class="tab-box"
                :class="{active:tabIndex4===index}"
              >{{item.name}}</div>
            </div>
          </div>
          <div class="container">
            <pie-double id="chart4" :color="['#2AD0FF','#5E4FFF']" :data="preventData" :total="preventTotal"></pie-double>
          </div>
        </div>
      </div>

      <div class="block-center">
        <div class="border-box center1">
          <img :src="require('./images/icon-alarm.png')" />
          <div class="alarm-info">
            <scroll-announce v-show="alarmList.length>0" ref="scrollAlarm" :data="alarmList">
              <template v-for="(item, index) in alarmList">
                <span :key="index" style="padding-right:2rem">{{item}}</span>
              </template>
            </scroll-announce>
          </div>
        </div>

        <div class="center2">
          <eut-map ref="eut-map" class="map" :mapData="mapData" @change="areaChange"></eut-map>
          <div style="height:50px" @click="areaAroundClick"></div>
        </div>

        <div class="center3">
          <div v-for="(item, index) in countArr" :key="index" class="count-item">
            <div class="count">{{ item.count }}</div>
            <div class="unit">({{ item.unit }})</div>
            <div class="name">{{ item.name }}</div>
          </div>
        </div>
      </div>

      <div class="block-right">
        <div class="border-box right1">
          <div class="header">
            <span>隐患排查</span>
            <div class="tabs-wrapper">
              <div class="btn">互联网+执法</div>
            </div>
          </div>
          <div class="container">
            <div class="loop-box">
              <div v-for="(item, index) in troubleArr" :key="index" class="loop-item">
                <div>
                  <p class="number">{{ item.count || 0}}</p>
                  <p>{{ item.name }}</p>
                </div>
              </div>
            </div>
            <div class="chart-box">
              <pie-legend
                id="chart5"
                :color="['#249BFF','#27C3F5','#2BF5F0','#19C48B','#64E270','#F6EE27','#FFA913','#EC7629','#C83232','#7B1FA7','#246CFF']"
                :data="troubleData"
              ></pie-legend>
            </div>
          </div>
        </div>

        <div class="border-box right2">
          <div class="header">
            <span>主体安全培训履责率</span>
            <div class="tabs-wrapper">
              <div
                v-for="(item, index) in tabs6"
                :key="index"
                class="tab-box"
                :class="{active:tabIndex6===index}"
              >{{item.name}}</div>
            </div>
          </div>
          <div class="container">
            <pie-double id="chart6" :color="['#FFC63C','#4C9DFF']" :data="trainData" :total="trainTotal"></pie-double>
          </div>
        </div>

        <div class="border-box right3">
          <div class="header">
            <span>公示栏</span>
            <div class="tabs-wrapper">
              <div
                v-for="(item, index) in tabs7"
                :key="index"
                class="tab-box"
                :class="{active:tabIndex7===index}"
                @click="changeTab7(index)"
              >{{item.name}}</div>
            </div>
          </div>
          <div class="container">
            <div class="count-box">
              <div v-for="(item, index) in publicArr" :key="index" class="count-item">
                <p>{{ item.name }}：</p>
                <p class="number" :style="{ color: item.color }">{{ item.count }}</p>
              </div>
            </div>
            <div class="ent-box" ref="scroll">
              <div class="list-header">
                <div class="header-item" style="width:40%">企业名称</div>
                <div class="header-item" style="width:25%">证书名称</div>
                <div class="header-item" style="width:15%">状态</div>
                <div class="header-item" style="width:20%">到期时间</div>
              </div>
              <vue-seamless-scroll
                v-if="!loading&&scrollVisible&&publicList.length>0"
                :data="publicList"
                :class-option="scrollOption"
                class="seamless-wrap"
              >
                <div
                  class="list-content"
                  v-for="(item,index) in publicList"
                  :key="index"
                  :class="index%2?'content-odd':'content-even'"
                >
                  <div class="content-item" style="width:40%;color:#42BAFE;">{{item.enterpriseName||"-"}}</div>
                  <div class="content-item" style="width:25%">{{item.certificate||"-"}}</div>
                  <div
                    class="content-item"
                    style="width:15%"
                    :style="{color:item.status==1?'#ff1b1b':item.status==2?'#ffff00':'#ffffff'}"
                  >{{item.statusText||"-"}}</div>
                  <div class="content-item" style="width:20%">{{item.expireDate||"-"}}</div>
                </div>
              </vue-seamless-scroll>
              <div v-show="publicList.length===0" class="no-data" style="height:calc(100% - 30px)">暂无数据</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VueSeamlessScroll from "vue-seamless-scroll";
import ScrollAnnounce from "./components/scroll-announce.vue";
import PieProgress from "./components/pie-progress.vue";
import PieDouble from "./components/pie-double.vue";
import PieLegend from "./components/pie-legend.vue";
import BarSimple from "./components/bar.vue";
import EutMap from "./components/map.vue";

import { getStatsData } from "@/api";

export default {
  components: {
    ScrollAnnounce,
    VueSeamlessScroll,
    PieProgress,
    PieDouble,
    PieLegend,
    BarSimple,
    EutMap,
  },
  data() {
    return {
      loading: false,
      currentDateTime: "",
      weather: "",
      indexUrl: "",
      alarmList: [],
      countArr: [
        { name: "数字激活企业", unit: "家", count: 0 },
        { name: "主体履责登入率", unit: "%", count: 0 },
        { name: "主体履责指数", unit: "%", count: 0 },
        { name: "风险双重预防等级", unit: "%", count: 0 },
      ],
      codeArr: [
        { name: "红码企业", level: "高风险", count: 0, color: "#FF0000" },
        { name: "橙码企业", level: "较大风险", count: 0, color: "#FF6100" },
        { name: "黄码企业", level: "一般风险", count: 0, color: "#FFFF00" },
        { name: "绿码企业", level: "低风险", count: 0, color: "#00FF00" },
      ],
      majorData: [],
      majorDataOrigin: [],
      ledgerTotal: 0,
      ledgerData: [
        { name: "未完成", count: 0 },
        { name: "已完成", count: 0 },
      ],
      preventTotal: 0,
      preventData: [
        { name: "未完成", count: 0 },
        { name: "已完成", count: 0 },
      ],
      troubleArr: [
        { name: "已整改隐患", count: 0 },
        { name: "超期未整改", count: 0 },
        { name: "执法推送", count: 0 },
        { name: "闭环率", count: "0%" },
      ],
      troubleData: [],
      trainTotal: 0,
      trainData: [
        { name: "未完成", count: 0 },
        { name: "已完成", count: 0 },
      ],
      publicArr: [
        { name: "到期数", count: 0, color: "#FF1B1B" },
        { name: "临期数", count: 0, color: "#FFFF00" },
      ],
      publicList: [],
      publicListOrigin: [],
      mapData: [
        {
          name: "魏塘街道",
          adcode: 330421001000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "罗星街道",
          adcode: 330421002000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "惠民街道",
          adcode: 330421003000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "大云镇",
          adcode: 330421102000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "西塘镇",
          adcode: 330421103000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "干窑镇",
          adcode: 330421105000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "陶庄镇",
          adcode: 330421107000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "姚庄镇",
          adcode: 330421111000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "天凝镇",
          adcode: 330421112000,
          count: 0,
          percent: 0,
          status: "1",
        },
      ],

      tabIndex2: 0,
      tabs2: [
        { name: "三场所三企业" },
        { name: "危化品" },
        { name: "厂房类别" },
      ],
      tabIndex3: 0,
      tabs3: [{ name: "月" }, { name: "年" }],
      tabIndex4: 0,
      tabs4: [{ name: "月" }, { name: "年" }],
      tabIndex6: 0,
      tabs6: [{ name: "月" }, { name: "年" }],
      tabIndex7: 0,
      tabs7: [{ name: "证书" }, { name: "检测&评价报告" }],
      scrollOption: {},
      scrollVisible: false,
      TimerScroll: 0,
      Interval: 0,
      IntervalTime: 0,
    };
  },
  mounted() {
    this.setScrollOption();
    window.addEventListener("resize", this.setScrollOption);

    this.getData();
    this.Interval && clearInterval(this.Interval);
    this.Interval = setInterval(() => {
      this.getData();
    }, 120000);

    this.getDateTime();
    this.IntervalTime && clearInterval(this.IntervalTime);
    this.IntervalTime = setInterval(() => {
      this.getDateTime();
    }, 60000);
  },
  beforeDestroy() {
    this.Interval && clearInterval(this.Interval);
    this.IntervalTime && clearInterval(this.IntervalTime);
    window.removeEventListener("resize", this.setScrollOption);
  },
  methods: {
    setScrollOption() {
      this.TimerScroll && clearTimeout(this.TimerScroll);
      this.scrollVisible = false;
      let wrap = this.$refs.scroll;
      let num = Math.floor(wrap.offsetHeight / 34);
      this.scrollOption = {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: num, // 开始无缝滚动的数据量
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true,
        singleHeight: 0,
        singleWidth: 0,
        waitTime: 100, // 单步运动停止的时间(默认值1000ms)
      };
      this.TimerScroll = setTimeout(() => {
        this.scrollVisible = true;
      }, 300);
    },

    gotoBackend() {
      this.indexUrl && window.open(this.indexUrl, "_blank");
    },
    changeTab2(index) {
      this.tabIndex2 = index;
      this.majorData = this.majorDataOrigin[index].levelInfo.map((item) => {
        return { name: item.name, count: item.count || 0 };
      });
    },
    changeTab7(index) {
      this.tabIndex7 = index;
      let data = this.publicListOrigin[index];
      this.publicArr[0].count = data.expireCount || 0;
      this.publicArr[1].count = data.nearExpireCount || 0;
      this.publicList = (data.dataList || []).map((item) => {
        return {
          enterpriseName: item.compnay,
          certificate: item.name,
          status:
            item.status === "过期" || item.status === "到期"
              ? "1"
              : item.status === "临期"
              ? "2"
              : "",
          statusText: item.status,
          expireDate: item.expireDate,
        };
      });
      this.setScrollOption();
    },

    async getData(area) {
      area = area || 330421;
      this.loading = true;
      let res = await getStatsData({ area });
      this.loading = false;
      if (res && res.status === 200) {
        this.weather = res.content.weather;
        this.indexUrl = res.content.indexUrl;

        this.alarmList = res.content.pushList || [];
        this.$refs.scrollAlarm && this.$refs.scrollAlarm.restart();

        this.codeArr[0].count = res.content.companyLevel.l1 || 0;
        this.codeArr[1].count = res.content.companyLevel.l2 || 0;
        this.codeArr[2].count = res.content.companyLevel.l3 || 0;
        this.codeArr[3].count = res.content.companyLevel.l4 || 0;

        this.ledgerTotal = res.content.bookData.allCount || 0;
        this.ledgerData[0].count = res.content.bookData.count2 || 0;
        this.ledgerData[1].count = res.content.bookData.count1 || 0;

        this.preventTotal = res.content.riskData.allCount || 0;
        this.preventData[0].count = res.content.riskData.count2 || 0;
        this.preventData[1].count = res.content.riskData.count1 || 0;

        this.countArr[0].count = res.content.companyCount || 0;
        this.countArr[1].count = res.content.loginCount || 0;
        this.countArr[2].count = res.content.finishCount || 0;
        this.countArr[3].count = res.content.riskCount || 0;

        this.majorDataOrigin = res.content.dangerCompanyLevel;
        this.tabs2 = (res.content.dangerCompanyLevel || []).map((item) => {
          return { name: item.level1Name };
        });
        let levelInfo =
          res.content.dangerCompanyLevel[this.tabIndex2].levelInfo || [];
        this.majorData = levelInfo.map((item) => {
          return { name: item.name, count: item.count || 0 };
        });

        this.troubleArr[0].count = res.content.problemData.finishCount || 0;
        this.troubleArr[1].count = res.content.problemData.expireCount || 0;
        this.troubleArr[2].count = res.content.problemData.pushCount || 0;
        this.troubleArr[3].count =
          (res.content.problemData.finishRate || 0) + "%";

        this.troubleData = (res.content.problemData.info || []).map((item) => {
          return { name: item.name, count: item.count || 0 };
        });

        this.trainTotal = res.content.trainData.allCount || 0;
        this.trainData[0].count = res.content.trainData.count2 || 0;
        this.trainData[1].count = res.content.trainData.count1 || 0;

        this.publicListOrigin = [
          res.content.certNotice,
          res.content.checkNotice,
        ];
        let publicData = this.publicListOrigin[this.tabIndex7];
        this.publicArr[0].count = publicData.expireCount || 0;
        this.publicArr[1].count = publicData.nearExpireCount || 0;
        let dataList = publicData.dataList || [];
        this.publicList = dataList.map((item) => {
          return {
            enterpriseName: item.compnay,
            certificate: item.name,
            status:
              item.status === "过期" || item.status === "到期"
                ? "1"
                : item.status === "临期"
                ? "2"
                : "",
            statusText: item.status,
            expireDate: item.expireDate,
          };
        });

        if (area == 330421) {
          this.mapData = (res.content.areaList || []).map((item) => {
            return {
              id: item.id,
              name: item.name,
              adcode: `${item.id}000`,
              count: item.companyCount || 0,
              percent: item.finishCount || 0,
              status: "1",
              url: item.url,
            };
          });
        }
      } else {
        this.initData();
      }
    },
    initData() {
      this.weather = "";
      this.indexUrl = "";

      this.alarmList = [];
      this.$refs.scrollAlarm && this.$refs.scrollAlarm.restart();

      this.codeArr[0].count = 0;
      this.codeArr[1].count = 0;
      this.codeArr[2].count = 0;
      this.codeArr[3].count = 0;

      this.ledgerTotal = 0;
      this.ledgerData[0].count = 0;
      this.ledgerData[1].count = 0;

      this.preventTotal = 0;
      this.preventData[0].count = 0;
      this.preventData[1].count = 0;

      this.countArr[0].count = 0;
      this.countArr[1].count = 0;
      this.countArr[2].count = 0;
      this.countArr[3].count = 0;

      this.majorDataOrigin = [];
      this.tabs2 = [
        { name: "三场所三企业" },
        { name: "危化品" },
        { name: "厂房类别" },
      ];
      this.majorData = [];

      this.troubleArr[0].count = 0;
      this.troubleArr[1].count = 0;
      this.troubleArr[2].count = 0;
      this.troubleArr[3].count = "0%";

      this.troubleData = [];

      this.trainTotal = 0;
      this.trainData[0].count = 0;
      this.trainData[1].count = 0;

      this.publicListOrigin = [];
      this.publicArr[0].count = 0;
      this.publicArr[1].count = 0;
      this.publicList = [];

      this.mapData = [
        {
          name: "魏塘街道",
          adcode: 330421001000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "罗星街道",
          adcode: 330421002000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "惠民街道",
          adcode: 330421003000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "大云镇",
          adcode: 330421102000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "西塘镇",
          adcode: 330421103000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "干窑镇",
          adcode: 330421105000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "陶庄镇",
          adcode: 330421107000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "姚庄镇",
          adcode: 330421111000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "天凝镇",
          adcode: 330421112000,
          count: 0,
          percent: 0,
          status: "1",
        },
      ];
    },

    areaChange(v) {
      this.getData(v);
    },
    areaAroundClick() {
      this.$refs["eut-map"] && this.$refs["eut-map"].clickAround();
      this.getData();
    },

    getDateTime() {
      let today = new Date();
      let year = today.getFullYear();
      let month = today.getMonth() + 1;
      let day = today.getDate();
      let hour = today.getHours();
      let min = today.getMinutes();
      let week = today.getDay() + 1;
      switch (week) {
        case 1:
          week = "一";
          break;
        case 2:
          week = "二";
          break;
        case 3:
          week = "三";
          break;
        case 4:
          week = "四";
          break;
        case 5:
          week = "五";
          break;
        case 6:
          week = "六";
          break;
        case 7:
          week = "日";
          break;
        default:
          week = "*";
      }
      let noon = hour < 12 ? "上午" : "下午";

      this.currentDateTime = `${year}年${month}月${day}日 星期${week} ${noon}${hour}:${min}`;
    },
  },
};
</script>

<style lang="less" scoped>
@import "./page.less";
</style>